<template>
    <div class="paydiv1" style="margin-top:10px">
        <img src="../../../assets/icon/hggood-1.png" style="width:100%;height:130%;margin-top:20px">
        <div class="paydiv2">
            <img src="../../../assets/icon/tick.png" class="paydiv2img">
            <span class="paydiv2span">订单提交成功，还差一步就抢到心爱的商品，快快支付吧~</span>
        </div>
        <div class="paydiv3">
            <span class="paydiv3span1">共1张订单，</span>
            <span style="color: rgb(21, 150, 255);" @click="goOrderDetails">订单详情</span>
            <span>。请于</span>
            <span style="color: rgb(228, 67, 102);">11分44秒</span>
            <span>内完成支付</span>
        </div>
        <div style="margin-top:5px">
            <span class="paydiv3span2">￥{{GetaxiosData.totalPrice}}</span>
            <span style="float: right;font-size:13px;margin-top:-5px">待支付：</span>
        </div>
    </div>
</template>

<script>
import {nanoid} from 'nanoid'
import axios from 'axios'
    export default {
        name:'PxPUp',
        data(){
            return{
                SendaxiosData:'',
                GetaxiosData:{'totalPrice':4688},
                MyOidData:'',
            }
        },
        mounted(){
            if(sessionStorage.getItem('PayOiddate') !=null){  //如果sessionStorage里的数据存在时
                if(this.$route.params.oid != null) {   //如果路由有传来数据(到达订单详情页面),此时是没有关闭已经存在的的订单详情页面而进行的路由跳转
                    if(this.$route.params.oid != sessionStorage.getItem('PayOiddate')){
                    this.SendaxiosData=this.$route.params.oid
                    sessionStorage.setItem('PayOiddate',JSON.stringify(this.SendaxiosData))
                    }else{
                        this.SendaxiosData=JSON.parse(sessionStorage.getItem('PayOiddate'))
                    }
                }
                else{
                    //如果路由没有传数据(路由没有跳转)      此时解释为刷新页面
                    this.SendaxiosData=JSON.parse(sessionStorage.getItem('PayOiddate'))
                }
            }else{	    //如果sessionStorage里没有数据(即路由有跳转)    此时解释为初次进入订单详情界面
                this.SendaxiosData=this.$route.params.oid
                sessionStorage.setItem('PayOiddate',JSON.stringify(this.SendaxiosData))
            }
            this.$addr.get(`orders/`).then(
                response=>{
                    console.log('请求获取订单信息成功',response)
                    for( let i =0,j =0; i<response.data.data.length ; i++){
                        if(response.data.data[i].oid == this.SendaxiosData){
                            this.GetaxiosData =response.data.data[i]
                            j++
                        }
                    }
                    this.$bus.$emit('PayTotalPrice',this.GetaxiosData.totalPrice)
                    this.MyOidData=this.GetaxiosData.oid
                    this.$bus.$emit('MyOidData',this.MyOidData)
                },
                error=>{
                    console.log('请求获取订单信息失败',error.message)
                }
            )
        },
        methods:{
            goOrderDetails(){
                if( this.MyOidData != ''){
                    this.$router.push({
                        name:'PxOrderDetails',
                        params:{oid:this.SendaxiosData}})
                }
            }
        },
    }
</script>

<style scoped>
.paydiv1{
    margin: 0 auto;
    margin-top: 10px;
    height: 100%;
}
.paydiv2img{
    margin-left: 15px;
    margin-top: 25px;
    height: 40px;
    widows: 40px;
}
.paydiv2span{
    margin-left: 10px;
    margin-top: 22px;
    position: absolute;
    font-size: 15px;
}
.paydiv3{
    font-size: 13px;
    padding-bottom: 5px;
    padding-top: 10px;

}
.paydiv3span1{
    margin-left: 55px;
}
.paydiv3span2{
    margin-right: 15px;
    margin-top: -5px;
    font-size: 13px;
    float: right;
    color: rgb(228, 67, 102);
}
</style>